 <template>
     <div>
       <!-- Header 区域 -->
       <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" />
   
       <!-- 文章信息区域 -->
       <div class="article-container" v-if="!show">
         <!-- 文章标题 -->
         <h1 class="art-title">{{artobj.title}}</h1>
   
         <!-- 用户信息 -->
         <van-cell center :title="artobj.aut_name" :label="fantime(artobj.pubdate)">
           <template #icon>
             <img :src="artobj.aut_photo" alt="" class="avatar">
           </template>
           <template #default>
             <div>
               <van-button type="info" size="mini" v-if="artobj.is_followed" @click="guanzhu(true)">已关注</van-button>
               <van-button icon="plus" type="info" size="mini" plain v-else @click="guanzhu(false)">关注</van-button>
             </div>
           </template>
         </van-cell>
   
         <!-- 分割线 -->
         <van-divider></van-divider>
   
         <!-- 文章内容 -->
         <div class="art-content" v-html="artobj.content"></div>
   
         <!-- 分割线 -->
         <van-divider>End</van-divider>
   
         <!-- 点赞 -->
         <div class="like-box">
           <!-- attitude代表点赞的状态 -1代表无态度 0是不喜欢 1是已经点赞 -->
           <van-button icon="good-job" type="danger" size="small" v-if="artobj.attitude==1" @click="dianzan(true)">已点赞</van-button>
           <van-button icon="good-job-o" type="danger" plain size="small" v-else @click="dianzan(false)">点赞</van-button>
         </div>
       </div>
       <!-- 文章评论部分 -->
       <div v-if="!show">
       <commenlist></commenlist>
       </div>
       <van-loading type="spinner" color="#1989fa" v-if="show">文章正在疯狂加载中...</van-loading>
     </div>
</template>

<script>
import {detailApi,guanzhuApi,quxiaoApi,dianzanApi,quxiaodianApi} from '@/api/index.js'
import commenlist from './commenlist/index.vue'
import {timeAgo} from '@/utils/date.js'
import { Toast } from 'vant'
export default {
  name:'articledetail',
  mounted(){
  },
  data(){
    return {
      artobj:{},
      scroly:0,
      show:true
    }
  },
  components:{
      commenlist
  },
 async created(){ //页面首次加载时发送请求
      const req=await detailApi(this.$route.query.id)
        this.artobj=req.data.data  
        this.show=false
  },
  methods:{
    fantime:timeAgo, //过滤时间的函数
  async  guanzhu(istrue){ //关注和取消关注的函数
       if(istrue){ //说明用户点击的是已关注按钮  说明用户想取消关注
           await quxiaoApi(this.artobj.aut_id)  //取消关注发送请求 然后再重新发送文章请求获取最新数据
          const req=await detailApi(this.$route.query.id)
           this.artobj=req.data.data
                 Toast.success('取消关注成功');
       }else{ //说明用户点在的是关注按钮上   说明用户想关注
           await guanzhuApi(this.artobj.aut_id)   //关注发送请求 然后再重新发送文章请求获取最新数据
          const req=await detailApi(this.$route.query.id)
           this.artobj=req.data.data
           Toast.success('关注成功');
       }
    },
   async dianzan(istrue){
         if(istrue){ //代表用户点击的是已点赞按钮,表示用户想取消点赞
             await quxiaodianApi(this.$route.query.id)  //取消点赞发送请求 然后再重新发情文章请求获取最新数据
              const req=await detailApi(this.$route.query.id)
                      this.artobj=req.data.data
                      Toast.success('取消点赞成功');
         }else{ //代表用户点击的是点赞按钮,表示用户想点赞
            await dianzanApi(this.$route.query.id)  //点赞发送请求 然后再重新发情文章请求获取最新数据
             const req=await detailApi(this.$route.query.id)
                   this.artobj=req.data.data
                   Toast.success('点赞成功');
         }
      }
  }
}
</script>

<style scoped lang="less">
   .article-container {
     padding: 10px;
     margin-top: 46px;
   }
   .art-title {
     font-size: 16px;
     font-weight: bold;
     margin: 10px 0;
   }
   
   .art-content {
     font-size: 12px;
     line-height: 24px;
     width: 100%;
     overflow-x: scroll;
     word-break: break-all;
       /deep/ img{
       	width: 100%;
     	}
       /deep/ pre {
           white-space: pre-wrap;
           word-wrap: break-word;
       }
   }
   
   .van-cell {
     padding: 5px 0;
     &::after {
       display: none;
     }
   }
   
   .avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: #f8f8f8;
     margin-right: 5px;
     border: none;
   }
   
   .like-box {
     display: flex;
     justify-content: center;
   }
.van-loading{
  text-align: center;
  margin-top: 50px;
}
   </style>